<template>
  <div id="app">
    <el-menu
      class="menu"
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1"
        ><router-link to="/" tag="div">主页</router-link></el-menu-item
      >
      <el-submenu index="2" v-if="isLogged && (isAdmin() || isMerchant())">
        <template slot="title">管理</template>
        <el-menu-item index="2-1"
          ><router-link to="/admin" tag="div"
            >查看商品</router-link
          ></el-menu-item
        >
        <el-menu-item index="2-2"
          ><router-link to="/admin/new" tag="div"
            >添加商品</router-link
          ></el-menu-item
        >
        <el-menu-item index="2-3"
          ><router-link to="/admin/manufacturers" tag="div"
            >查看生产商</router-link
          ></el-menu-item
        >
        <el-menu-item index="2-4"
          ><router-link to="/admin/manufacturers/new" tag="div"
            >添加生产商</router-link
          ></el-menu-item
        >
      </el-submenu>
      <el-menu-item index="3" v-if="isLogged"
        ><router-link to="/cart" tag="div">购物车</router-link></el-menu-item
      >
      <div class="header-right">
        <el-dropdown v-if="isLogged">
          <el-avatar class="el-dropdown-link" :src="avatar"></el-avatar>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item>
              <router-link to="/user/settings" tag="div">账户设置</router-link>
            </el-dropdown-item> -->
            <el-dropdown-item>
              <div @click="handleLogout">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div v-else class="not-logged">
          <router-link to="/user/login" tag="div">
            <el-button type="primary" v-if="this.$store.state.showLogin"
              >登录/注册</el-button
            >
          </router-link>
        </div>
      </div>
    </el-menu>
    <router-view />
  </div>
</template>

<script>
// import Authing from "authing-js-sdk";
export default {
  name: "App",
  data() {
    return {
      activeIndex: "1",
      avatar: "https://www.flaticon.com/svg/static/icons/svg/149/149071.svg",
    };
  },
  mounted() {
    const userInfo = localStorage.getItem("userInfo");
    return userInfo !== null;
    if (userInfo) {
      this.$store.commit("SET_USER", JSON.parse(userInfo));
    } else {
      this.$router.push("/user/login");
      return false;
    }
  },
  watch: {
    $route: "showLoginButton",
  },
  methods: {
    showLoginButton() {
      this.$store.state.showLogin = true;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleLogout() {
      const userPoolId = "5fbb40ea49d4b5f780e81fe0";
      const token = JSON.parse(localStorage.getItem("token"));
      const userId = JSON.parse(localStorage.getItem("userInfo"))._id;
      const authing = new Authing({
        userPoolId,
      });
      try {
        const res = authing.checkLoginStatus(token);
        console.log("res", res);
        authing.logout(userId);
        this.$message({
          message: "登出成功",
          type: "success",
        });
      } catch (err) {
        console.log("err", err);
      }
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      this.$store.commit("LOGOUT");
      this.$router.go("/");
    },
    isAdmin() {
      const userAccessList = JSON.parse(localStorage.getItem("userAccess"));
      return (
        !!userAccessList &&
        userAccessList.map((role) => role.code).includes("admin")
      );
    },
    isMerchant() {
      const userAccessList = JSON.parse(localStorage.getItem("userAccess"));
      return (
        !!userAccessList &&
        userAccessList.map((role) => role.code).includes("merchant")
      );
    },
  },
  computed: {
    isLogged() {
      let token = this.$store.state.user.token;
      return !!token;
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #125ca7;
  margin-top: 60px;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: right;
  background: rgb(84, 92, 100);
  align-items: center;
}
.header-right {
  padding-top: 11px;
  float: right;
  margin-right: 20px;
}
.header-right:hover {
  cursor: pointer;
}
.not-logged {
  display: flex;
  flex-direction: row;
}
.not-logged > div {
  margin-right: 16px;
}
</style>
